<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>添加考勤记录</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#0FC6C2',
            neutral: {
              100: '#F5F7FA',
              200: '#E4E7ED',
              300: '#C0C4CC',
              400: '#909399',
              500: '#606266',
              600: '#303133',
              700: '#1E1E1E',
            },
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .sidebar-link {
        @apply flex items-center gap-3 px-4 py-3 text-neutral-400 hover:bg-primary/5 hover:text-primary rounded-lg transition-all duration-200;
      }
      .sidebar-link.active {
        @apply bg-primary/10 text-primary font-medium;
      }
      .card-shadow {
        @apply shadow-[0_2px_12px_0_rgba(0,0,0,0.08)];
      }
      .btn-primary {
        @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200;
      }
      .btn-outline {
        @apply border border-neutral-200 hover:border-primary text-neutral-600 hover:text-primary font-medium py-2 px-4 rounded-lg transition-all duration-200;
      }
    }
  </style>
</head>
<body class="bg-neutral-100 font-inter min-h-screen flex flex-col">
  <div class="container mx-auto px-4 py-8 max-w-2xl">
    <div class="bg-white rounded-xl p-6 card-shadow">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-xl font-semibold text-neutral-700">添加考勤记录</h2>
        <a href="employee.html" class="text-primary hover:text-primary/80 transition-colors">
          <i class="fa fa-arrow-left mr-1"></i> 返回
        </a>
      </div>
      
      <form id="attendanceForm" class="space-y-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <!-- 员工ID -->
          <div class="space-y-2">
            <label for="employeeId" class="block text-sm font-medium text-neutral-700">员工ID <span class="text-red-500">*</span></label>
            <input type="number" id="employeeId" name="employeeId" required 
                   class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
                   placeholder="请输入员工ID">
          </div>
          
          <!-- 考勤日期 -->
          <div class="space-y-2">
            <label for="attendanceDate" class="block text-sm font-medium text-neutral-700">考勤日期 <span class="text-red-500">*</span></label>
            <input type="date" id="attendanceDate" name="attendanceDate" required
                   class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">
          </div>
          
          <!-- 上班时间 -->
          <div class="space-y-2">
            <label for="clockInTime" class="block text-sm font-medium text-neutral-700">上班时间 <span class="text-red-500">*</span></label>
            <input type="time" id="clockInTime" name="clockInTime" required
                   class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">
          </div>
          
          <!-- 下班时间 -->
          <div class="space-y-2">
            <label for="clockOutTime" class="block text-sm font-medium text-neutral-700">下班时间 <span class="text-red-500">*</span></label>
            <input type="time" id="clockOutTime" name="clockOutTime" required
                   class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">
          </div>
          
          <!-- 考勤状态 -->
          <div class="space-y-2">
            <label for="status" class="block text-sm font-medium text-neutral-700">考勤状态 <span class="text-red-500">*</span></label>
            <select id="status" name="status" required
                    class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">
              <option value="">请选择状态</option>
              <option value="正常">正常</option>
              <option value="迟到">迟到</option>
              <option value="早退">早退</option>
              <option value="缺勤">缺勤</option>
              <option value="请假">请假</option>
            </select>
          </div>
          
          <!-- 备注 -->
          <div class="space-y-2 md:col-span-2">
            <label for="remark" class="block text-sm font-medium text-neutral-700">备注</label>
            <textarea id="remark" name="remark" rows="3"
                      class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
                      placeholder="请输入备注信息"></textarea>
          </div>
        </div>
        
        <!-- 提交按钮 -->
        <div class="flex justify-end space-x-3 pt-4 border-t border-neutral-200">
          <a href="employee.html" class="btn-outline">
            取消
          </a>
          <button type="submit" class="btn-primary">
            <i class="fa fa-check mr-1"></i> 提交
          </button>
        </div>
      </form>
      
      <!-- 提示信息 -->
      <div id="message" class="mt-4 hidden"></div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 设置默认日期为今天
      const today = new Date();
      const formattedDate = today.toISOString().split('T')[0];
      document.getElementById('attendanceDate').value = formattedDate;
      
      // 表单提交处理
      const attendanceForm = document.getElementById('attendanceForm');
      const messageDiv = document.getElementById('message');
      
      attendanceForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 获取表单数据
        const employeeId = document.getElementById('employeeId').value;
        const attendanceDate = document.getElementById('attendanceDate').value;
        const clockInTime = document.getElementById('clockInTime').value;
        const clockOutTime = document.getElementById('clockOutTime').value;
        const status = document.getElementById('status').value;
        const remark = document.getElementById('remark').value;
        
        // 构建请求数据 - 使用与后端AttendanceVo字段名完全匹配的属性名
        const attendanceData = {
          employeeId: parseInt(employeeId),
          attendanceDate: attendanceDate,  // 使用attendanceDate而不是date
          clockInTime: clockInTime + ':00',
          clockOutTime: clockOutTime + ':00',
          status: status,
          remark: remark
        };
        
        console.log('提交考勤数据:', attendanceData);
        
        // 获取token
        const token = localStorage.getItem('token');
        
        // 发送API请求
        fetch('/attendances', {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(attendanceData)
        })
        .then(response => {
          if (!response.ok) {
            return response.json().then(data => {
              throw new Error(data.message || '添加考勤记录失败');
            });
          }
          return response.json();
        })
        .then(data => {
          console.log('添加考勤成功:', data);
          
          // 显示成功消息
          messageDiv.innerHTML = `
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
              <strong class="font-bold">成功！</strong>
              <span class="block sm:inline">考勤记录已成功添加。</span>
            </div>
          `;
          messageDiv.classList.remove('hidden');
          
          // 重置表单
          attendanceForm.reset();
          document.getElementById('attendanceDate').value = formattedDate;
          
          // 3秒后跳转回考勤管理页面
          setTimeout(() => {
            window.location.href = 'employee.html#attendance';
          }, 3000);
        })
        .catch(error => {
          console.error('添加考勤出错:', error);
          
          // 显示错误消息
          messageDiv.innerHTML = `
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
              <strong class="font-bold">错误！</strong>
              <span class="block sm:inline">${error.message}</span>
            </div>
          `;
          messageDiv.classList.remove('hidden');
        });
      });
    });
  </script>
</body>
</html>